import { CodeBlock } from '@theme';
import webpackConfig from '../../public/configs/webpack.config?raw';

# Webpack Config

One of Re.Pack key design goals was to give as much power and control to the developer — to you.
This means that Re.Pack doesn't hide anything under its own proprietary configuration, but uses regular Webpack configuration.

## Configuration path

By default, when running `react-native webpack-start` or `react-native webpack-bundle`, Re.Pack will look for Webpack configuration in the following places:

1. `<root>/webpack.config.js`
2. `<root>/.webpack/webpack.config.js`
3. `<root>/.webpack/webpackfile`

Where `<root>` is your project's root directory.

:::info

The paths above are the same ones that normal Webpack CLI looks for Webpack configuration.

:::

If you want to store Webpack config in different place, you can provide custom path:

- `react-native webpack-start --webpackConfig <path>`
- `react-native webpack-bundle --webpackConfig <path>`
- `webpack-cli -c <path>`

:::info

If the `<path>` is relative, then it will be resolved based on root directory detected by React Native CLI, which usually should point to your project's root directory.

:::

## Webpack config template

Every project is different, has different structure, uses different dependencies, has different requirements, so we cannot know what Webpack configuration your project might needs. Instead we give use a sensible and well-documented [Webpack template](https://github.com/callstack/repack/blob/main/templates/webpack.config.js) to use as a base and adjust some bits based on your project.

You can find the template inside Re.Pack's repository here:
https://github.com/callstack/repack/blob/main/templates/webpack.config.js

or copy it from below:

<CodeBlock language="js" title="templates/webpack.config.js">
  {webpackConfig}
</CodeBlock>

We highly encourage to create recipes for adding or adjusting the support for other common use cases not included in the default template. **We welcome any PR!**

## Re.Pack's config APIs

To make Webpack-produced bundle compatible and runnable by React Native, Re.Pack gives you a set of Webpack plugins:

- [AssetsPlugin](../../api/node/classes/AssetsPlugin)
- [DevServerPlugin](../../api/node/classes/DevServerPlugin)
- [LoggerPlugin](../../api/node/classes/LoggerPlugin)
- [OutputPlugin](../../api/node/classes/OutputPlugin)
- [TargetPlugin](../../api/node/classes/TargetPlugin)
- [JavaScriptLooseModePlugin](../../api/node/classes/JavaScriptLooseModePlugin)

Except for `JavaScriptLooseModePlugin` all of them are required — not including any of them might break your build on make the bundle crash at runtime.

Additionally to let you use React Native CLI in form of `react-native webpack-start` or `react-native webpack-bundle` commands, Re.Pack gives you helper functions to get arguments project information from React Native CLI and use them inside your Webpack config:

- [getContext](../../api/node/functions/getContext)
- [getDevServerOptions](../../api/node/functions/getDevServerOptions)
- [getEntry](../../api/node/functions/getEntry)
- [getMode](../../api/node/functions/getMode)
- [getPlatform](../../api/node/functions/getPlatform)
- [getReactNativePath](../../api/node/functions/getReactNativePath)
- [isMinimizeEnabled](../../api/node/functions/isMinimizeEnabled)
- [getInitializationEntries](../../api/node/functions/getInitializationEntries)
- [getPublicPath](../../api/node/functions/getPublicPath)
- [getResolveOptions](../../api/node/functions/getResolveOptions)

:::caution

It entirely possible not to use the functions above, but **it's highly recommended to leave them**.

:::

If you're planning on using Webpack CLI to run development server or bundle your application instead of relying on React Native CLI, then you might want to look into providing `fallback` values to each of these functions, for example:

```js
const context = ReactNative.getContext({ fallback: __dirname });
```

Those `fallback` values are only used when Webpack compilation is created by Webpack CLI instead of React Native CLI.

:::caution

It's highly recommended to use React Native CLI and `react-native webpack-start` or `react-native webpack-bundle` commands unless you have previous experience with Webpack and you know what you're doing.

:::
